Skip to content

Upgrade dependencies and fix state-tracking bug#3

Merged
indexzero merged 8 commits intomasterfrom
lifecycle-handlers
Jul 27, 2017
Merged

Upgrade dependencies and fix state-tracking bug#3
indexzero merged 8 commits intomasterfrom
lifecycle-handlers

Conversation

@aspyrx
Copy link
Copy Markdown
Contributor

@aspyrx aspyrx commented Jul 26, 2017

Previously, the context and props handlers would not be called to indicate that a component's name has changed or it got unmounted. This PR fixes this issue, and adds the appropriate tests.

It also upgrades some outdated dependencies (istanbul -> nyc, godaddy-style -> eslint-config-godaddy-react, react-addons-test-utils -> react-test-renderer, other various version bumps) and removes the requirement for jsdom for testing.

If this gets merged, it would probably be a major version bump - it introduces extra calls to lifecycle/change handlers, as well as a new validity state. The undefined state existed implicitly before (when a Validates did not have a validates prop), but it was undocumented. It now has a better-defined meaning documented in the README.

Copy link
Copy Markdown
Contributor

@indexzero indexzero left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would like to see the getters removed before merging. Overall looks like a solid refactor. Definitely a lot of complexity in all the lifecycle edge-cases. Glad to see all the unit tests appear to cover them 👍

Comment thread validate.js

get validates() {
// Prefer props over state.
const { validates = this.state.validates } = this.props;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great ES6-based React pattern I would not have thought of. 💯

Comment thread validates.js Outdated
get ctxHandler() {
const { onValidChange = noop } = this.context;
return onValidChange;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You only use these getters once in onValidChange. Remove them and simply define them in that function scope.

Comment thread validates.js
const { onValidChange: ctxHandler } = this.context;
onValidChange(isValid, wasValid, oldName) {
const { propsHandler, ctxHandler } = this;
const { name } = this.props;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per above comment this would be:

const { name, propsHandler = noop } = this.props;
const { ctxHandler = noop } = this.context;

Comment thread validates.js Outdated
const { validates: wasValid } = this.props;
const { validates: isValid } = nextProps;
componentDidUpdate(prevProps) {
const { validates: wasValid, name: oldName } = prevProps;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: prevName since it came from prevProps

Comment thread validate.js Outdated
this.onValidChange(isValid, wasValid);
// Prefer props over state.
const { validates: wasValid = prevState.validates, name: oldName } = prevProps;
this.onValidChange(isValid, wasValid, oldName);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: prevName since it came from prevProps

Comment thread validates.js Outdated

const { onValidChange: propsHandler, name } = this.props;
const { onValidChange: ctxHandler } = this.context;
onValidChange(isValid, wasValid, oldName) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: rename oldName to prevName for consistency with other rename nitpicks. Nitpicks on nitpicks?

Comment thread package.json
"prepublish": "npm run build",
"build": "babel *.js -d lib"
"build": "babel *.js -d lib",
"lint": "eslint --fix *.js test",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you not using the eslint-godaddy-react binary that is installed by the eslint-config-godaddy-react package here? This way you don't need to have a the .eslint file in the root of the repository.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I find it nice to specify the .eslint config at the project root just to make it clear what config this project is using for tools that run eslint separately (for example, when Neovim runs it using neomake). Of course that's a bit of a selfish reason so I'm happy to remove it.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other argument @3rd-Eden is that the eslint-godaddy-react binaries have 💩 💩 💩 support for Windows due to how which works cross platform. Keeping it this way make contribution more accessible to Windows folks.

Comment thread package.json Outdated
"eslint-plugin-react": "^6.10.3",
"mocha": "^3.4.2",
"nyc": "^11.0.3",
"prop-types": "15.x.x",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we semver range this in exactly the same way the rest of the dependencies?

Comment thread validate.js
};
}

get validates() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSDoc

Comment thread validate.js

const undef = void 0;

export default class Validate extends Validates {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSDoc

Copy link
Copy Markdown
Contributor

@indexzero indexzero left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 agree with comments from @3rd-Eden, but they could be done post merge.

@indexzero indexzero dismissed 3rd-Eden’s stale review July 27, 2017 14:42

Comments from @3rd-Eden have been addressed

@indexzero indexzero merged commit 1c75fd7 into master Jul 27, 2017
@indexzero indexzero deleted the lifecycle-handlers branch July 27, 2017 14:43
indexzero pushed a commit that referenced this pull request Jul 28, 2017
* Add test to demonstrate issue

* Upgrade dependencies and re-do tests to accomodate new lifecycle handler logic

* More test coverage for mount/unmount

* Update README docs for testing

* Remove extraneous getters, `oldName` -> `prevName`

* More naming changes

* Use consistent semver style

* Improved jsdoc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants